<template>  
  <div id="app">  
    <h1>商城</h1>  
  
    <!-- 假设你有一个商品列表，并循环渲染Product组件 -->  
    <div v-for="product in products" :key="product.id">  
      <product :product="product"></product>  
    </div>  
  
    <!-- 购物车组件 -->  
    <cart></cart>  
  </div>  
</template>  
  
<script>  
// 导入Product和Cart组件  
import Product from './components/Product.vue';  
import Cart from './components/Cart.vue';  
  
export default {  
  name: 'App',  
  components: {  
    Product,  
    Cart,  
  },  
  data() {  
    return {  
      // 示例商品列表，实际开发中可能是从API获取的  
      products: [  
        { id: 1, name: '手机', price: 10 },  
        { id: 2, name: '电脑', price: 20 },  
        // ...更多商品  
      ],  
    };  
  },  
};  
</script>  
  
<style>  
/* 在这里添加你的样式 */  
#app {  
  font-family: Avenir, Helvetica, Arial, sans-serif;  
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;  
  text-align: center;  
  color: #2c3e50;  
  margin-top: 60px;  
}  
</style>